<template>
    <div class="hande">
        <div class="hander">
            <div class="hander-left">投标时间筛选：
                <el-date-picker v-model="time" type="datetime" placeholder="选择开始时间">
                </el-date-picker>
                <el-date-picker v-model="time1" type="datetime" placeholder="选择结束时间">
                </el-date-picker>
                <el-button type="primary" @click="search()">筛选</el-button>
            </div>
            <div class="hander-right">
                <el-button type="primary" @click="showDialog()">添加</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50px">
            </el-table-column>
            <el-table-column prop="date" label="创建时间" width="200px">
                <template slot-scope="scope">
                    <span>{{scope.row.date | cui}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="收支类型">
            </el-table-column>
            <el-table-column prop="describe" label="收支描述">
            </el-table-column>
            <el-table-column prop="income" label="收入">
            </el-table-column>
            <el-table-column prop="expend" label="支出">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row._id)" type="danger" size="mini">删除</el-button>
                    <el-button type="warning" size="mini" @click="update(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
            :page-sizes="[3, 5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 添加弹出框 -->
        <el-dialog title="添加数据" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span class="span">
                <el-form ref="arr" :model="arr" :rules="rules" label-width="80px">
                    <el-form-item label="收支类型">
                        <el-select v-model="arr.type" placeholder="选择收支类型">
                            <el-option label="提现" value="提现"></el-option>
                            <el-option label="提现手续费" value="提现手续费"></el-option>
                            <el-option label="充值" value="充值"></el-option>
                            <el-option label="优惠券" value="优惠券"></el-option>
                            <el-option label="充值礼券" value="充值礼券"></el-option>
                            <el-option label="转账" value="转账"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收支描述" prop="describe">
                        <el-input v-model="arr.describe"></el-input>
                    </el-form-item>
                    <el-form-item label="收入" prop="income">
                        <el-input v-model="arr.income"></el-input>
                    </el-form-item>
                    <el-form-item label="支出" prop="expend">
                        <el-input v-model="arr.expend"></el-input>
                    </el-form-item>
                    <el-form-item label="账户现金" prop="cash">
                        <el-input v-model="arr.cash"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="arr.remark"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹出框 -->
        <!-- <el-dialog title="修改数据" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
            <span class="span">
                收支类型:<el-input v-model="arr.type"></el-input>
                收支描述:<el-input v-model="arr.describe"></el-input>
                收入:<el-input v-model="arr.income"></el-input>
                支出:<el-input v-model="arr.expend"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="doupdate()">确 定</el-button>
            </span>
        </el-dialog> -->
        <el-dialog title="修改数据" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
            <span class="span">
                <el-form ref="arr" :model="arr" :rules="rules" label-width="80px">
                    <el-form-item label="收支类型">
                        <el-select v-model="arr.type" placeholder="选择收支类型">
                            <el-option label="提现" value="提现"></el-option>
                            <el-option label="提现手续费" value="提现手续费"></el-option>
                            <el-option label="充值" value="充值"></el-option>
                            <el-option label="优惠券" value="优惠券"></el-option>
                            <el-option label="充值礼券" value="充值礼券"></el-option>
                            <el-option label="转账" value="转账"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收支描述" prop="describe">
                        <el-input v-model="arr.describe"></el-input>
                    </el-form-item>
                    <el-form-item label="收入" prop="income">
                        <el-input v-model="arr.income"></el-input>
                    </el-form-item>
                    <el-form-item label="支出" prop="expend">
                        <el-input v-model="arr.expend"></el-input>
                    </el-form-item>
                    <el-form-item label="账户现金" prop="cash">
                        <el-input v-model="arr.cash"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="arr.remark"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doupdate()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            dialog: {
                title: '添加资金信息',   //dialog标题：添加或修改资金信息
                type: 'add'             //dialog类型：add：添加 update：修改
            },
            dialogVisible: false,
            dialogVisible1: false,
            list: [],
            time: '',
            time1: '',
            // tableData:[],
            rules: {
                describe: [
                    { required: true.valueOf, message: '收支描述不能为空', trigger: ['blur'] }
                ],
                income: [
                    { required: true.valueOf, message: '收支描述不能为空', trigger: ['blur'] }
                ],
                expend: [
                    { required: true.valueOf, message: '收支描述不能为空', trigger: ['blur'] }
                ],
                cash: [
                    { required: true.valueOf, message: '收支描述不能为空', trigger: ['blur'] }
                ],

            },
            arr: {
                type: '',
                describe: "",
                income: '',
                expend: '',
                remark: '',
                cash: ''
            },
            id: '',
            pagesize: 10,
            pagenum: 1,
        }
    },

    methods: {
        // 搜索
        async search() {
            let time = this.time.getTime()   //获取到输入框里面的时间戳
            let time1 = this.time1.getTime() //获取到输入框里面的时间戳
            console.log(time, time1)
            await this.$http({ url: '/api/profiles' }).then(res => {
                this.list = res.data
            })

            return this.list = this.list.filter(item => {
                var cui = new Date(item.date).getTime()
                // console.log(data)
                return cui >= time && cui <= time1
            })
        },
        // 修改
        update(row) {
            this.dialogVisible1 = true,
                this.arr = row
            this.id = row._id
            this.dialog.title = '修改资金信息',
                this.dialog.type = 'update'
        },
        // async doupdate() {
        //     await this.$http({
        //         url: 'api/profiles/edit/' + this.id,
        //         method: 'POST',
        //         data: {
        //             type: this.arr.type,
        //             describe: this.arr.describe,
        //             income: this.arr.income,
        //             expend: this.arr.expend,
        //             cash: 200,
        //             remark: '123'
        //         }
        //     }).then(res => {
        //         // console.log(res)
        //         if (res.status == 200) {
        //             this.$message({
        //                 message: '修改成功',
        //                 type: 'success'
        //             });
        //             this.dialogVisible1 = false
        //             this.getlist()
        //         } else {
        //             this.$message.error('修改失败');
        //         }
        //     })
        // },
        doupdate() {
            // this.$refs.arr.validate(async(valid)=>{
            //     if(!valid){
            //         return this.$message({type:'error',message:'输错啦'})
            //     }
            //    await this.$http({url:'api/profiles/edit/'+this.id,method:'POST',data:this.arr}).then(res=>{
            //         if (res.status == 200) {
            //         this.$message({
            //             message: '修改成功',
            //             type: 'success'
            //         });
            //         this.dialogVisible1 = false
            //         this.arr = {
            //             type: '',
            //             describe: "",
            //             income: '',
            //             expend: '',
            //             remark:'',
            //             cash:''
            //         },
            //         this.getlist()
            //     } else {
            //         this.$message.error('修改失败');
            //     }
            //     })
            // })
            this.$refs.arr.validate(async (valid) => {
                if (!valid) {
                    return this.$message({ type: 'error', message: '输错啦' })
                }
                this.$http({ url: 'api/profiles/edit/' + this.id, method: 'POST', data: this.arr }).then(res => {
                    if (res.status == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogVisible1 = false
                        this.arr = {
                            type: '',
                            describe: "",
                            income: '',
                            expend: '',
                            remark: '',
                            cash: ''
                        },
                            this.getlist()
                    } else {
                        this.$message.error('修改失败');
                    }
                })
            })
        },
        // 删除
        del(id) {

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete('api/profiles/delete/' + id).then(res => {
                    if (res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                    // this.getlist()
                   this.list = this.list.filter(item=>{
                    return item._id!==id
                   })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 添加
        // async add() {
        //     await this.$http({
        //         url: 'api/profiles/add',
        //         method: 'POST',
        //         data: {
        //             type: this.arr.type,
        //             describe: this.arr.describe,
        //             income: this.arr.income,
        //             expend: this.arr.expend,
        //             cash: 200,
        //             remark: '123'
        //         }
        //     }).then(res => {
        //         // console.log(res)
        //         if (res.status == 200) {
        //             this.$message({
        //                 message: '添加成功',
        //                 type: 'success'
        //             });
        //             this.dialogVisible = false
        //             this.getlist()
        //         } else {
        //             this.$message.error('添加失败');
        //         }
        //     })
        // },
        //添加按钮点击弹出模态框
        showDialog() {
            // this.$refs.form.resetFields()
            this.dialog.title = '添加资金信息',
                this.dialog.type = 'add',
                this.dialogVisible = true
        },
        add() {
            this.$refs.arr.validate(async (valid) => {
                if (!valid) {
                    return this.$message({ type: 'error', message: '输错啦' })
                }
                this.$http({ url: 'api/profiles/add', method: 'POST', data: this.arr }).then(res => {
                    if (res.status == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.arr = {
                            type: '',
                            describe: "",
                            income: '',
                            expend: '',
                            remark: '',
                            cash: ''
                        },
                            this.getlist()
                    } else {
                        this.$message.error('添加失败');
                    }
                })
            })
        },
        // 渲染数据
        async getlist() {
            await this.$http({
                url: 'api/profiles',
                method: 'GET',
            }).then(res => {
                this.list = res.data
                // this.tableData = res.data
                console.log(this.list)
            })
        },
        // 关闭添加模态框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 分页

        // 公式
        //      每一页第一个的下标                              每一页最后一个下标
        //  （当前页数-1）* 每页条数                            （当前页数*每页条数）
        //   符号>= 比如第二页每页5条 即（2-1）*5 5>=即5         符号< 小于当前 比如 第二页每页5条 即2*5即9
        //          第二页开始第一位下标5                           第二页结束下标为9  <10 即9
        // 控制每页显示的条数
        handleSizeChange(val) {
            console.log(val)
            this.pagesize = val
            //   var tableData = this.list.filter((item,index)=>{
            //     let start = (this.pagenum-1)*this.pagesize
            //     let end = this.pagesize*this.pagenum
            //     return index>=start&&index<end
            //   })
            //   this.tableData = tableData
        },
        // 控制到第几页
        handleCurrentChange(val) {
            this.pagenum = val
            //   var tableData = this.list.filter((item,index)=>{
            //     let start = (this.pagenum-1)*this.pagesize
            //     let end = this.pagesize*this.pagenum
            //     return index>=start&&index<end
            //   })
            //   this.tableData = tableData
        }
    },
    created() {
        this.getlist()
    },
    computed: {
        tableData() {
            return this.list.filter((item, index) => {
                let start = (this.pagenum - 1) * this.pagesize
                let end = this.pagesize * this.pagenum
                return index >= start && index < end
            })
        },
        total() {
            return this.list.length
        }
    },
    filters: {
        cui(val) {
            let time = new Date(val)
            let year = time.getFullYear()
            let obj = {
                month: time.getMonth() + 1,
                day: time.getDate(),
                hour: time.getHours(),
                minute: time.getMinutes(),
                second: time.getSeconds()
            }
            for (let i in obj) {
                obj[i] = obj[i] < 10 ? '0' + obj[i] : obj[i]
            }
            return `${year}-${obj.month}-${obj.day}-${obj.hour}:${obj.minute}:${obj.second}`
        }
    }
}
</script>
  

<style lang="scss" scoped>
.span {
    display: flex;
    flex-wrap: wrap;
}

.hande {
    width: 100%;
}

.hander {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .hander-left {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .el-input {
            width: 150px;
            margin-left: 20px;
        }

        .el-button {
            margin-left: 20px;
        }
    }
}
</style>